<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户概览</title>
<style>
    .media-body, .media-left, .media-right{
        display: inline-block;
        vertical-align: top;
        width: 70%;
    }
    .event .media-body p{
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
    }

    .tile-stats h3{
        font-size:16px;
    }
    .col-lg-3 { width:20%;}
</style>
</head>

<body>
<!-- page content -->
<!-- top tiles -->
<div class="row top_tiles">
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-group" style="color: #568ebf;"></i></div>
            <div class="count" style="font-size: 34px;height: 63px">${userNum!0}</div>
            <h3>已注册用户</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <!--<p>&nbsp;</p>-->
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-flag" style="color: #e25a5a;"></i></div>
            <div class="count">${companyNum!0}</div>
            <h3>已认证企业</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <!--<p>&nbsp;</p>-->
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-user" style="color: #8775a7;"></i></div>
            <div class="count">${cenMemberNum!0}</div>
            <h3>集采供应商</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <!--<p>&nbsp;</p>-->
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-edit" style="color: #09835a;"></i></div>
            <div class="count">${signNum!0}</div>
            <h3>签约采购商</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <!--<p>&nbsp;</p>-->
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-credit-card" style="color: #eb5405;"></i></div>
            <div class="count">${paNum!0}</div>
            <h3>签约平安易宝</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <!--<p>&nbsp;</p>-->
        </div>
    </div>
</div>
<!-- /top tiles -->

<div class="row" style="height: 465px;">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="dashboard_graph" style="position: relative;">

            <div class="row x_title">
                <div class="col-md-6">
                    <h3>新增注册用户、认证转化率及用户增长率</h3>
                </div>
                <div class="col-md-6" style="text-align: right;">
                    <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                        <li><a class="collapse-link" onclick="changeDisplay('hccDiv' , 'addUserTable');"><i
                                class="fa fa-line-chart"></i></a></li>
                        <li><a class="collapse-link" onclick="changeDisplay('addUserTable' , 'hccDiv');"><i
                                class="fa fa-table"></i></a></li>
                        <li><a class="collapse-link" onclick="userAddExcelExport();"><i class="fa fa-download"></i></a></li>
                    </ul>
                    <div class="controls input-append date form_date addUserDate" data-date="" data-date-format="dd MM"
                         data-link-field="dtp_input1" data-link-format="yyyy-mm" style="margin-right: 3px;">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="dtp_input1Hm1" size="16" type="text" value="" readonly>
                    </div>
                    —
                    <input type="hidden" id="dtp_input1" value=""/>
                    <div class="controls input-append date form_date addUserDate" data-date="" data-date-format="dd MM"
                         data-link-field="dtp_input2" data-link-format="yyyy-mm">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="dtp_input1Hm2" size="16" type="text" value="" readonly>
                    </div>
                    <input type="hidden" id="dtp_input2" value=""/>
                </div>
            </div>

            <!--<div>-->
                <div class="col-md-9 col-sm-9 col-xs-12" id="hccDiv">
                    <div id="hccontainer"></div>
                </div>
                <div class="col-md-9 col-sm-9 col-xs-12 hidChart" id = "addUserTable">
                    <div class="x_content">
                        <table id="datatable" class="table table-striped table-bordered" style="width: 100%;">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>时间</th>
                                <th>新增注册用户</th>
                                <th>认证转化率</th>
                                <th>用户增长率</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            <!--</div>-->
            <div class="col-md-3 col-sm-12 col-xs-12" style="position: absolute; right: 0px;">
                <div>
                    <div class="x_title">
                        <h2>活跃用户 Top 5</h2>
                        <a class="more" href="#/project/detail" onclick="pjaxContent('/user/userdetail?type=4')">more >></a>
                        <div class="clearfix"></div>
                    </div>
                    <ul class="list-unstyled top_profiles scroll-view">
                        [#if hotUsers??]
                        [#list hotUsers as hu]
                        <li class="media event">
                            <a class="pull-left border-aero profile_thumb">
                                <i class="fa fa-user [#if hu_index % 3 == 0] aero[/#if][#if hu_index % 3 == 1] green[/#if][#if hu_index % 3 == 2] blue[/#if]"></i>
                            </a>
                            <div class="media-body">
                                <p title="${hu.mobile!hu.email}">账号&nbsp;${hu.mobile!hu.email}</p>
                                <p title="${hu.company!'暂未认证'} "> 企业&nbsp;${hu.company!'暂未认证'} </p>
                                <p>
                                    <!--<small>12 Sales Today</small>-->
                                    活跃指数&nbsp;<strong>${hu.hot!0}</strong>
                                </p>
                            </div>
                        </li>
                        [/#list]
                        [/#if]
                    </ul>
                </div>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

</div>

<br/>

<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12" >
        <div class="x_panel">
            <div class="x_title">
                <h2>企业各身份概览</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                    <li><a class="collapse-link" onclick="changeDisplay('cIdChart' , 'cIdTable');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('cIdTable' , 'cIdChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="cIdExcelExport();"><i class="fa fa-download"></i></a></li>
                </ul>
                <div style="float: right;">
                    <div class="controls input-append date form_date cIdDate" data-date="" data-date-format="dd MM"
                         data-link-field="cIdDate1" data-link-format="yyyy-mm" style="margin-right: 3px;">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="cIdDateHM1" size="16" type="text" value="" readonly>
                    </div>
                    —
                    <input type="hidden" id="cIdDate1" value=""/>
                    <div class="controls input-append date form_date cIdDate" data-date="" data-date-format="dd MM"
                         data-link-field="cIdDate2" data-link-format="yyyy-mm">
                        <span class="add-on"><i class="icon-th"></i></span>
                        <input id="cIdDateHM2" size="16" type="text" value="" readonly>
                    </div>
                    <input type="hidden" id="cIdDate2" value=""/>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 350px;">
                <div id="cIdChart">
                    <canvas id="cloumCharts"></canvas>
                </div>
                <div class="hidChart" id="cIdTable">
                    <table id="coloumTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>时间</th>
                            <th>采购商</th>
                            <th>供应商</th>
                            <th>双重身份</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>认证企业及增长率</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                    <li><a class="collapse-link" onclick="changeDisplay('addCompanyChart' , 'aCTable');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('aCTable' , 'addCompanyChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="companyAddExcelExport()"><i class="fa fa-download"></i></a></li>
                </ul>
                <div style="float: right;">
                <div class="controls input-append date form_date addCDate" data-date="" data-date-format="dd MM"
                     data-link-field="addCDate1" data-link-format="yyyy-mm" style="margin-right: 3px;">
                    <span class="add-on"><i class="icon-th"></i></span>
                    <input id="addCDateHM1" size="16" type="text" value="" readonly>
                </div>
                —
                <input type="hidden" id="addCDate1" value=""/>
                <div class="controls input-append date form_date addCDate" data-date="" data-date-format="dd MM"
                     data-link-field="addCDate2" data-link-format="yyyy-mm">
                    <span class="add-on"><i class="icon-th"></i></span>
                    <input id="addCDateHM2" size="16" type="text" value="" readonly>
                </div>
                <input type="hidden" id="addCDate2" value=""/>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 350px;">
                <div id="addCompanyChart">
                    <div id="hcForCompany" style="height: 350px"></div>
                </div>
                <div class="hidChart" id="aCTable">
                    <table id="addCompanyTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>时间</th>
                            <th>新增企业数量</th>
                            <th>增长率</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>热点功能浏览量(PV)</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                    <li><a class="collapse-link" onclick="changeDisplay('pvChart' , 'pvTable');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('pvTable' , 'pvChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="pvExcelExport()"><i class="fa fa-download"></i></a></li>
                </ul>
                <div id="pvDateRange" class="pull-right"
                     style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                    <span></span> <b class="caret"></b>
                    <input id = "pvRange1" type="hidden">
                    <input id = "pvRange2" type="hidden">
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 330px;">

                <div id="pvChart">
                    <canvas id="dayPV"></canvas>
                </div>
                <div class="hidChart" id="pvTable">
                    <table id="pvDataTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>时间</th>
                            <th>询价浏览量</th>
                            <th>商品浏览量</th>
                            <th>商铺浏览量</th>
                            <th>新闻浏览量</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>热点功能访客量(UV)</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                    <li><a class="collapse-link" onclick="changeDisplay('uvChart' , 'uvTable');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('uvTable' , 'uvChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="uvExcelExport();"><i class="fa fa-download"></i></a></li>
                </ul>
                <div id="uvDateRange" class="pull-right"
                     style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                    <span></span> <b class="caret"></b>
                    <input id = "uvRange1" type="hidden">
                    <input id = "uvRange2" type="hidden">
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 330px;">
                <div id="uvChart">
                    <canvas id="dayUV"></canvas>
                </div>
                <div class="hidChart" id="uvTable">
                    <table id="uvDataTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>时间</th>
                            <th>询价浏览量</th>
                            <th>商品浏览量</th>
                            <th>商铺浏览量</th>
                            <th>新闻浏览量</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>企业所在地分布情况</h2>
                <!--<ul class="nav navbar-right panel_toolbox">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 300px;">
                <div id="echart_world_map" style="height: 300px;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>各品类供应商数量占比</h2>
                <!--<ul class="nav navbar-right panel_toolbox">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 300px">
                <div id="categoryCompanyPie" style="height:300px;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>各企业身份占比</h2>
                <!--<ul class="nav navbar-right panel_toolbox">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height:300px;">
                <div id="companyPropieChart" style="height: 300px;"></div>
            </div>
        </div>
    </div>

</div>
<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>发布询价单排名前十的采购商</h2>
                <!--<ul class="nav navbar-right panel_toolbox" style="min-width: auto;">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <a class="more" href="#/project/detail" onclick="pjaxContent('/project/detail?type=3')">more >></a>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table id="enquiryTable" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <!--<th>序号</th>-->
                        <th>采购商</th>
                        <th style="min-width: 55px;">发布数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>采购金额排名前十的采购商</h2>
                <!--<ul class="nav navbar-right panel_toolbox" style="min-width: auto;">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <a class="more" href="#/project/detail" onclick="pjaxContent('/trade/tradedetail?type=4')">more >></a>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table id="buyPriceTable" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <!--<th>序号</th>-->
                        <th>采购商</th>
                        <th style="min-width: 55px;">采购金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>发布商品总数排名前十的供应商</h2>
                <!--<ul class="nav navbar-right panel_toolbox" style="min-width: auto;">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <a class="more" href="#/project/detail" onclick="pjaxContent('/shop/shopdetail?type=1')">more >></a>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table id="publishTable" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <!--<th>序号</th>-->
                        <th>供应商</th>
                        <th style="min-width: 55px;">发布数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
<!-- /page content -->
<script src="/res/dateTimePicker/bootstrap-datetimepicker.js"></script>
<script src="/res/build/js/common/common.js"></script>
<script src="/res/build/js/user/overview.js"></script>
</body>
</html>
